はてなブログのタイトルに JavaScript で文字数を表示する

from 2022/05

■ - 人生の諸問題に本と計算機で闘う日記

369文字

https://gyazo.com/ea83f6aecfa1549ce837b2d150d339e1

code:html

</time>

</a>

</div>

</header>

記事に題名がないないときに h1 に entry-title-empty という Class が設定される

題名があるとき

ファイアーエムブレム風花雪月 - 人生の諸問題に本と計算機で闘う日記

code:html

<a href="https://kejinan.hatenadiary.com/entry/2022/05/01/010207" class="entry-title-link bookmark">ファイアーエムブレム風花雪月</a>

</h1>

題名がないとき

■ - copy and destroy

code:html

</h1>

コードは、

code:js

[].forEach.call(

document.querySelectorAll('article'),

(a) => {

var c = 0;

[].forEach.call(

a.querySelectorAll('p'),

(p) => c += p.textContent.length

);

console.log(c);

var h = a.querySelector('h1.entry-title.entry-title-empty');

if (h) h.textContent = ${c}文字

}

);

call とか => とか、知らん

let じゃなくて var なのはスコープの問題? → let でも動いたわ

こっちの方が、思っている文字数と一致する

code:js

[].forEach.call(

document.querySelectorAll('article'),

(a) => {

let c = 0;

[].forEach.call(

a.querySelectorAll('.entry-content p'),

(p) => c += p.textContent.length

);

console.log(c);

var h = a.querySelector('h1.entry-title.entry-title-empty a');

if (h) h.textContent = ${c}文字

}

);

開発者向けの設定について - はてなブログヘルプ https://help.hatenablog.com/entry/developer-option

はてなブログダッシュボード＞設定＞詳細設定タブ＞headに要素を追加

<head>要素にメタデータを追加